<template>
  <div class="outer">
    <div class="select">
      <el-select
        v-model="gzmValue"
        size="small"
        placeholder="请选择工作面"
        @change="GzmJinDu"
      >
        <el-option
          v-for="item in gzm"
          :key="item.ID"
          :label="item.laFaceNamebel"
          :value="item.FaceName"
        >
        </el-option>
      </el-select>
    </div>
    <div class="gongzuo">
      <div class="gongzuomian">
        <div><img src="../../assets/开工.png" alt="" /></div>
        <div>当日掘进{{ DangRiJueJin }}m</div>
      </div>

      <div class="gongzuomian">
        <div><img src="../../assets/开工.png" alt="" /></div>
        <div>累积掘进{{ LeiJiJuein }}m</div>
      </div>

      <div class="gongzuomian">
        <div><img src="../../assets/oil pumping machine.png" alt="" /></div>
        <div>当日回采{{ DangRiHuiCai }}m</div>
      </div>

      <div class="gongzuomian">
        <div><img src="../../assets/oil pumping machine.png" alt="" /></div>
        <div>累积回采{{ LeiJiHuiCai }}m</div>
      </div>
    </div>
  </div>
</template>
  
  <script>
import {
  DingBanHomePageFanZhanZhengZhengChangandYiChang,
  jinchiliebiao,
  ShouyeHuiCaiAndJueJin,
} from "../../https/api/user";
export default {
  data() {
    return {
      gzm: [],
      gzmValue: "",
      DangRiHuiCai: "",
      LeiJiHuiCai: "",
      DangRiJueJin: "",
      LeiJiJuein: "",
    };
  },
  mounted() {
    this.FenZhanList();
    this.gzmXinXin();
  },
  methods: {
    GzmJinDu() {
      console.log(this.gzmValue);
      const data = {
        FaceName: this.gzmValue,
      };
      ShouyeHuiCaiAndJueJin(data).then((res) => {
        console.log("根据SEL 工作面 查询 掘进和回采", res);
        if (res) {
          this.DangRiHuiCai = res[0].DayHuiCais;
          this.LeiJiHuiCai = res[0].LeiJiHuiCais;
          this.DangRiJueJin = res[0].DayJueJins;
          this.LeiJiJuein = res[0].LeiJiJueJins;
        }
      });
    },
    gzmXinXin() {
      jinchiliebiao().then((res) => {
        console.log("工作面SEL", res);
        this.gzm = res;
      });
    },
    FenZhanList() {
      const data = {
        count: 1,
      };
      DingBanHomePageFanZhanZhengZhengChangandYiChang(data).then((res) => {
        console.log("首页One分站正常和异常数量", res);
        this.normal = res;
      });
    },
  },
};
</script>
  
  <style lang="less" scoped>
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.outer {
  height: 100%;
  .select {
    width: 100%;
    height: 35%;
    .el-select {
      height: 10px;
    }
  }
  .gongzuo {
    width: 100%;
    height: 65%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .gongzuomian {
      width: 25%;
      height: 100%;

      > div:nth-child(1) {
        width: 50%;
        height: 50%;

        margin: 0 auto;

        img {
          width: 100%;
          height: 100%;
        }
      }
      > div:nth-child(2) {
        height: 50%;
        font-size: 12px;
        color: rgb(73, 190, 236);
        padding: 10% 0 0 0;
        text-align: center;
      }
    }
  }
}

.picker {
  height: 20px;
  background-color: rgb(14, 26, 55);
  border: 1px solid rgb(14, 26, 55);

  ::v-deep .el-range-input {
    background-color: rgb(14, 26, 55);
    border: 1px solid rgb(14, 26, 55);
  }
}
::v-deep .el-input__inner {
  background-color: transparent !important;
}
</style>